<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssfive</title>
</head>
<style>
  div{

  }
  .one{
    /*浮动:float:
    1.可以把标签换行的空格中的白色距离给消除
    2.具有行内块的作用
    3.浮动的权重高
    4.浮动的标签不能margin和padding
    */
    float: left;
    width: 100px;
    height: 100px;
    background-color:  deepskyblue;
    margin-top: 50px;
  }
  .two{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
  }
  .three{
    width: 300px;
    height: 300px;
    background-color: pink;
  }
  .four{
    width: 500px;
    height: 30px;
    background-color: deepskyblue;
    margin: 0 auto;
  }
  .five{
    width: 500px;
    height: 200px;
    background-color: orange;
    margin: 0 auto;
  }
  .six{
    float: left;
    width: 150px;
    height: 200px;
    background-color: pink;

  }
  .seven{
    float: left;
    width: 350px;
    height: 200px;
    background-color: orange;

  }
  .eight{
    background-color: orange;
    width: 300px;
  }
  .nine{
    float: top;
    background-color: deepskyblue;
    width: 200px;
  }
</style>
<body>
  <div>
    浮动
  </div>
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>


  <hr>
  <div class="four">four</div>
  <div class="five">
    <div class="six">six</div>
    <div class="seven">seven</div>
  </div>
  <div class="eight">CSS书写顺序:浏览器的执行效率会更高</div>
  <div class="nine">
      1.浮动/display
      2.margin/padding<br>
      3.文字样式
  </div>


<script>

</script>
</body>
</html>
